<div bsModal #createAppModal="bs-modal" (onShown)="onShown()" aria-labelledby="createAppModal" class="modal fade"
    tabindex="-1" role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form *ngIf="active" #softwaresForm="ngForm" name="AppsForm" novalidate (ngSubmit)="save()"
                autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{l("CreateNewApp")}}</span>
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="close()">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <tabset class="tab-container tabbable-line">
                        <tab class="pt-5" heading="{{l('BaseMsg')}}" customClass="kt-tabs__item">
                            <div class="form-row">
                                <div class="col-4">
                                    <div class="form-group kt-form__group">
                                        <label class="control-label">{{l("Picture")}}</label>
                                        <app-fileupload [fileUrl]="software?.id?software.largeImageUrl:''"
                                            (onUpLoadEvent)="onUploadPic($event)"
                                            (onBeforeSendEvent)="onBeforeSend($event)"></app-fileupload>
                                    </div>
                                    <div class="form-group kt-form__group">
                                        <label class="control-label">{{l("icon")}}</label>
                                        <app-fileupload [fileUrl]="software?.id?software.logoUrl:''"
                                            (onUpLoadEvent)="onUploadIcon($event)"
                                            (onBeforeSendEvent)="onBeforeSend($event)"></app-fileupload>
                                    </div>
                                </div>

                                <div class="col-8">
                                    <div class="form-row">
                                        <div class="form-group col-6">
                                            <label>{{l("AppName")}}*</label>
                                            <input #nameInput="ngModel" class="form-control" type="text" name="name"
                                                [(ngModel)]="software.name" required maxlength="32">
                                            <validation-messages [formCtrl]="nameInput"></validation-messages>
                                        </div>
                                        <div class="form-group col-6">
                                            <label>{{l("versionNumber")}}</label>
                                            <input #versionNumberInput="ngModel" class="form-control" type="text"
                                                name="versionNumber" [(ngModel)]="software.versionNumber"
                                                maxlength="12">
                                            <validation-messages [formCtrl]="versionNumberInput"></validation-messages>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-6">
                                            <label>{{l("Language")}}</label>
                                            <input #nameInput="ngModel" class="form-control" type="text" name="language"
                                                [(ngModel)]="software.language" maxlength="32">
                                            <validation-messages [formCtrl]="nameInput"></validation-messages>
                                        </div>
                                        <div class="form-group col-6">
                                            <label>{{l("type")}}*</label>
                                            <select #typeInput="ngModel" class="form-control" name="type" required
                                                [(ngModel)]="software.type">
                                                <option [value]="type" *ngFor="let type of CreateSoftwareInputTypes">
                                                    {{type}}</option>
                                            </select>
                                            <validation-messages [formCtrl]="typeInput"></validation-messages>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-12">
                                            <label>{{l("uploadFilePackage")}}</label>
                                            <form name="packageUrlForm" id="packageUrlForm" novalidate>
                                                <div class="input-group">
                                                    <input class="form-control" type="file" id="packageUrlFile" hidden
                                                        name="fileUrl" multiple="false" (change)="uploadFile($event)">
                                                    <input class="form-control" type="text" name="packageUrl"
                                                        [(ngModel)]="software.packageUrl">
                                                    <span class="input-group-btn">
                                                        <label for="packageUrlFile" style="margin-bottom: 0px;"
                                                            class="btn btn-primary">{{software?.packageUrl?l('Edit'):l('add')}}</label>
                                                        <button *ngIf="software?.packageUrl" class="btn btn-primary"
                                                            (click)="resetResource()">{{l('Delete')}}</button>
                                                    </span>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <div class="progress" *ngIf="progress">
                                                <div class="progress-bar progress-bar-info progress-bar-striped"
                                                    role="progressbar" aria-valuenow="20" aria-valuemin="0"
                                                    aria-valuemax="100" [ngStyle]="{width: progress+'%'}">
                                                    <span class="sr-only">{{progress}}% Complete</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-6">
                                            <label>{{l("Author")}}</label>
                                            <input #ownerInput="ngModel" class="form-control" type="text" name="owner"
                                                [(ngModel)]="software.owner" maxlength="32">
                                            <validation-messages [formCtrl]="ownerInput"></validation-messages>
                                        </div>
                                        <div class="form-group col-6">
                                            <label>{{l("runningEnver")}}</label>
                                            <select #envTypeInput="ngModel" class="form-control" name="envType"
                                                [(ngModel)]="software.envType">
                                                <option [value]="type" *ngFor="let type of CreateSoftwareInputEnvTypes">
                                                    {{type}}</option>
                                            </select>
                                            <validation-messages [formCtrl]="envTypeInput"></validation-messages>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-6">
                                            <label>{{l("resolution")}}</label>
                                            <input #resolutionInput="ngModel" class="form-control" type="text"
                                                name="resolution" [(ngModel)]="software.resolution" maxlength="32">
                                            <validation-messages [formCtrl]="resolutionInput"></validation-messages>
                                        </div>
                                        <div class="form-group col-6">
                                            <label>{{l("AppUri")}}</label>
                                            <input #AppUriInput="ngModel" class="form-control" type="text"
                                                name="exePath" [(ngModel)]="software.exePath">
                                            <validation-messages [formCtrl]="AppUriInput"></validation-messages>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-6">
                                            <label>{{l("appsetting")}}</label>
                                            <textarea #settingInput="ngModel" class="form-control" type="text"
                                                name="setting" [(ngModel)]="software.setting"></textarea>
                                        </div>
                                        <div class="form-group col-6">
                                            <label>{{l("description")}}</label>
                                            <textarea #descriptionInput="ngModel" class="form-control" type="text"
                                                name="description" [(ngModel)]="software.description"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-row">

                                        <div class="form-group col-6" style="position:relative;">
                                            <label class="checkbox checkbox-primary"
                                                style="position:absolute;top:50%;">
                                                <input [(ngModel)]="software.isShowToTenant"
                                                    type="checkbox" name="isShowToTenant" />{{l("isShowToTenant")}}
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </tab>
                    </tabset>
                </div>
                <div class="modal-footer">
                    <button [disabled]="saving" type="button" class="btn btn-primary"
                        (click)="close()">{{l("Cancel")}}</button>
                    <button type="submit" class="btn btn-primary blue" [disabled]="!softwaresForm.form.valid"
                        [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                        <i class="fa fa-save"></i>
                        <span>{{l("Save")}}</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>